<template>
    <view v-if="commidtyDetail.length != 0">
        <!-- 轮播开始 -->
		<view class="banner">
			<swiper class="swiper" @change="changeSwiper" autoplay>
				<block v-for="(item, index) in swiperImg" :key="index">
                    <swiper-item>
                        <img :src="item" alt="" style="width:100%;height:100%">
                    </swiper-item>
                </block>
			</swiper>
			<!-- 轮播指示点样式修改 -->
			<view class="dots">
				<block v-for="(item,index) in swiperImg.length" :key="item">
					<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
				</block>
			</view>
		</view>
		<!-- 轮播结束 -->

        <!-- 商品信息开始 -->
        <view class="commodity-info">
            <view class="commodity-info-left">
                <view class="commodity-name">{{commidtyDetail.spu_name}}</view>
                <view class="commodity-price">
                    <text class="commodity-price-new">￥{{commidtyDetail.activity_price}}</text>
                    <text class="commodity-price-old">￥{{commidtyDetail.price}}</text>
                </view>
                <view class="commodity-post">邮费：{{commidtyDetail.postage}}</view>
            </view>
            <view class="commodity-info-right">
                <!-- <view class="iconfont icon-icon-" style="margin-left:110rpx;color:#999;font-size:33rpx;margin-top:48rpx"></view> -->
                <!-- <view class="commodity-info-share">分享</view> -->
                <view class="commodity-info-num">总销量：{{commidtyDetail.sales_volume}}笔</view>
            </view>
        </view>
        <!-- 商品信息结束 -->

        <!-- 评论区开始 -->
        <view class="comment"> 
            <view class="comment-header">
                <!-- <view class="header-mark"></view> -->
                <view class="header-title">评论（{{commidtyDetail.comment_count}}）</view>
                <view class="header-more" @tap="lookMore">查看更多></view>
            </view>
            <block v-for="(item, index) in commidtyDetail.comment" :key="index">
                <view class="comment-item">
                    <view class="head-portrait">
                        <img :src="item.customer.avatar_url" alt="" style="width:100%;height:100%">
                    </view>
                    <view class="comment-info">
                        <view class="comment-person">
                            <text style="color:#333333;font-size:30rpx">{{item.customer.nick_name}}</text>
                            <text style="color:#999999;font-size:24rpx;margin-left:30rpx">{{item.created_at}}</text>
                        </view>
                        <view class="comment-text">{{item.content}}</view>
                        <view class="comment-photo-box">
                            <block v-for="(item1, index1) in item.images" :key="index1">
                                <view class="comment-photo">
                                    <img :src="item1" alt="" style="width:100%;height:100%">
                                </view>
                            </block>
                        </view>
                    </view>
                </view>
            </block>
        </view>
        <!-- 评论区结束 -->

        <!-- 店铺开始 -->
        <view class="store">
            <view class="store-portrait">
                <img :src="img_base_url + '/icon.png'" alt="" style="width:100%;height:100%">
            </view>
            <view class="store-info">
                <view class="store-name">农乎自营旗舰店</view>
                <view class="store-text">店铺经营旅游景点农产品</view>
                <view class="store-commodity">全部商品<text style="color:#333333;font-size:34rpx;margin-left:32rpx">4</text></view>
                <view class="call-merchant iconfont icon-dianhua"><text style="color:#999;margin-left:10rpx;font-size:24rpx" @tap="makePhoneCall">联系供应商</text></view>
            </view>
        </view>
        <!-- 店铺结束 -->

        <!-- 商品详情开始 -->
        <view class="detail">
            <view class="detail-title">详情</view>
            <!-- <view class="detail-img"></view> -->
            <view class="detail-text">
                <rich-text :nodes="commidtyDetail.details"></rich-text>
            </view>
        </view>
        <!-- 商品详情结束 -->

        <!-- 推荐开始 -->
        <view class="recommend">
            <view class="recommend-title">推荐</view>
            <view class="recommend-list">
                <block v-for="(item, index) in commidtyDetail.recommend" :key="index">
                    <view class="recommend-item">
                        <view class="recommend-item-img">
                            <img :src="item.commodity_image_thum" alt="" style="width:100%;height:100%">
                        </view>
                        <view class="recommend-item-info">
                            <text style="color:#333333;font-size:24rpx">{{item.spu_name}}</text>
                            <text style="color:#FF1E1E;font-size:24rpx;">￥{{item.activity_price}}</text>
                        </view>
                    </view>
                </block>
            </view>
        </view>
        <!-- 推荐结束 -->

        <!-- 立即购买开始 -->
        <view class="bottom">
            <view class="go-store" @tap="goStore">
                <!-- <view style="width:54rpx;height:48rpx;font-size:48rpx;color:#24C79C" class="iconfont icon-shangdian"></view>
                <view style="margin-top:4rpx">进店逛逛</view> -->
            </view>
            <view class="add-cart" v-if="commidtyDetail.commodity_type == 0" @tap="goShoppingCart">
                <view style="width:54rpx;height:48rpx;font-size:48rpx;color:#24C79C" class="iconfont icon-gouwuche"></view>
                <view style="margin-top:4rpx">购物车</view>
            </view>
            <view class="buying-box">
                <view class="buying-addCart" @tap="addCart">加入购物车</view>
                <view class="buying-now" @tap="buyingNow">立即购买</view>
            </view>
        </view>
        <!-- 立即购买结束 -->

        <!-- 立即购买弹出框开始 -->
        <view class="buying-dialog" v-show="isShow">
            <view class="mark"></view>
            <view class="iconfont icon-close_icon" style="position:fixed;bottom:560rpx;right:42rpx;z-index:9999;color:#fff;font-size:60rpx" @tap="closeBuyingDialog"></view>
            <view class="content">
                <view class="buying-top">
                    <view class="buying-info">
                        <view class="buying-info-img">
                            <img :src="commidtyDetail.commodity_image_thum" alt="" style="width:100%;height:100%">
                        </view>
                        <view style="width:70%;margin-left:37rpx">
                            <view class="buying-info-price">￥{{totalPrice}}</view>
                            <view class="buying-info-name">
                                <view>{{commidtyDetail.spu_name}}</view>
                                <!-- <view>/{{commidtyDetail.CommodityUnit}}</view> -->
                            </view>
                        </view>
                    </view>
                    <view class="buying-standards">
                        <view style="color:#999999;font-size:28rpx;margin-left:13rpx;">选择规格</view>
                        <view :class="showChoose == false ? 'choose-standards' : 'choose-standards-show'" @tap="showChooseBox">{{choosedStandard}}↓</view>
                        <view class="standards-box" v-show="showChoose">
                            <scroll-view style="height:104rpx" scroll-y>
                                <block v-for="(item, index) in chooseList" :key="index">
                                    <view :class="item.id == choosedStandardId ? 'standards-box-item-active standards-box-item' : 'standards-box-item'" @tap="chooseStandards(item)">{{item.sku_name}}</view>
                                </block>
                            </scroll-view>
                        </view>
                    </view>
                    <view class="buying-num">
                        <view style="color:#999999;font-size:28rpx;margin-left:13rpx;">选择数量</view>
                        <view class="choose-num">
                            <view class="choose-num-reduce" @tap="reduceNum">
                                <img src="../../static/-.png" alt="" style="width:100%;height:100%">
                            </view>
                            <view class="choose-num-total">{{commidtyNum}}</view>
                            <view class="choose-num-add" @tap="addNum">
                                <img src="../../static/+.png" alt="" style="width:100%;height:100%">
                            </view>
                        </view>
                    </view>
                </view>
                <view class="buying-bottom">
                    <view class="buying-bottom-button" v-if="type == 1" @tap="addCartNow">立即添加</view>
                    <view class="buying-bottom-button" @tap="goConfirmOrder" v-if="type == 2">立即购买</view>
                </view>
            </view>
        </view>
        <!-- <buying-now></buying-now> -->
    </view>
</template>

<script>
// import buyingNow from '../../components/buying-now/buying-now'
import { CommidtyModel } from '../../model/commidty'
import { config } from '../../common/utils/congfig'
import { CartModel } from '../../model/cart'
const commidtyModel = new CommidtyModel()
const cartModel = new CartModel()
export default {
    components: {
        // buyingNow
    },
    data() {
        return {
            img_base_url: config.img_base_url,
            swiperImg: [],
            current: 0,
            swiperCurrent: 0,
            isShow: false,
            commidtyDetail: [],
            showChoose: false, // 控制是否显示选择规格盒子
            chooseList: [], // 规格列表
            choosedStandard: '', // 选中的规格的名字
            choosedStandardId: '', // 选中的规格的Id
            choosedStandardPrice: '', // 选中的规格的价格
            commidtyNum: 1,
            type: 0,
            spu_id: '',
            shopId: ''
        }
    },
    methods: {
        // 初始化商品信息
        initCommidtyInfo() {
            this.choosedStandard = this.chooseList[0].sku_name
            this.choosedStandardId = this.chooseList[0].id
            this.choosedStandardPrice = this.chooseList[0].activity_price
            this.commidtyNum = 1
        },
        changeSwiper(e) {
            this.swiperCurrent = e.detail.current;
        },
        goShoppingCart() {
            uni.switchTab({
                url: '/pages/shoppingCart/shoppingCart'
            })
        },
        buyingNow() {
            // 验证登录
            const loginRes = this.checkLogin('/pagesA/commodity-detail/commodity-detail','1')
            if(loginRes) {
                this.initCommidtyInfo()
                this.isShow = true
                this.type = 2
            }
        },
        closeBuyingDialog() {
            this.isShow = false
        },
        lookMore() {
            uni.navigateTo({
                url: '/pagesD/assessment-more/assessment-more?spu_id=' + this.spu_id
            })
        },
        goStore() {
            uni.navigateTo({
                url: '/pagesA/store/store'
            })
        },
        goConfirmOrder() {
            // type等于1表示是直接购买添加订单
            let commidtyDetail = this.commidtyDetail
            commidtyDetail.details = ''
            uni.navigateTo({
                url: '/pagesC/confirm-order/confirm-order?commidtyDetail=' + JSON.stringify(commidtyDetail) + '&commidtyNum=' + this.commidtyNum + '&sku_id=' + this.choosedStandardId + '&type=1' + '&price=' + this.totalPrice
            })
        },
        getCommidtyDetail(id) {
            let data = {
                spu_id: id
            }
            commidtyModel.getCommidtyDetail(data).then((res) => {
                if(res.code == 200) {
                    this.commidtyDetail = res.data
                    this.chooseList = res.data.sku
                    this.swiperImg = res.data.commodity_image
                    this.initCommidtyInfo()
                }
            })
        },
        reduceNum() {
            // let a = this.commidtyNum
            if(this.commidtyNum > 1) {
                this.commidtyNum = this.commidtyNum - 1
            }else {
                uni.showToast({
                    title: '至少购买一件商品',
                    icon: 'none'
                })
            }
        },
        addNum() {
            this.commidtyNum = this.commidtyNum + 1
        },
        showChooseBox() {
            // if(this.showChoose == false) {
            //     this.showChoose = true
            // }else if(this.showChoose == true) {
            //     this.showChoose = false
            // }
            this.showChoose == false ? this.showChoose = true : this.showChoose = false
        },
        chooseStandards(item) {
            console.log(item)
            this.choosedStandard = item.sku_name
            this.choosedStandardId = item.id
            this.choosedStandardPrice = item.activity_price
            this.showChoose = false
        },
        // 添加商品到购物车
        addCart() {
            // 验证登录
            const loginRes = this.checkLogin('/pagesA/commodity-detail/commodity-detail', '1')
            if(loginRes) {
                this.initCommidtyInfo()
                this.isShow = true
                this.type = 1
            }
        },
        // 立即添加商品到购物车
        addCartNow() {
            let data = {
                spu_id: this.commidtyDetail.id,
                sku_id: this.choosedStandardId,
                number: this.commidtyNum,
                shop_id: this.commidtyDetail.shop_id
            }
            console.log(data)
            cartModel.addCommidtyToCart(data).then((res) => {
                if(res.code == 201) {
                    uni.showToast({
                        title: res.msg,
                        icon: 'success'
                    })
                    this.isShow = false
                }
            })
        },
        makePhoneCall() {
            uni.makePhoneCall({
                phoneNumber: '19136141045'
            })
        }
    },
    computed: {
        totalPrice() {
            return this.choosedStandardPrice * this.commidtyNum
        }
    },
    onLoad(option) {
        console.log(option)
        // let shopId = option.id
        this.shopId = option.id
        this.spu_id = option.id
        
    },
    onShow() {
        this.isShow = false
        this.getCommidtyDetail(this.shopId)
    }
}
</script>

<style>
    .banner {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.banner img {
		width: 100%;
		height: 100%;
	}
	.swiper {
        width: 100%;
        height: 432rpx;
        overflow: hidden;
        position: relative;
    }
	.dots {
        position: absolute;
        bottom: 20rpx;
        right: 63rpx;       
        z-index: 99;
        display: flex;
        flex-direction: row;
        justify-content: center      
    }
	.dot {
        width: 10rpx;
        height: 9rpx;
        transition: all .6s;
        background:rgba(255,255,255,1);
        margin-right: 10rpx;
		border-radius: 50%;
    }
	.active {
        width: 24rpx;
        height: 9rpx;
        background:rgba(255,255,255,1);
		border-radius: 4rpx;
    }
    .commodity-info {
        height: 202rpx;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 0 51rpx 0 43rpx;
    }
    .commodity-name {
        color: #333333;
        font-size: 38rpx;
        font-weight: 500;
        margin-top: 25rpx;
    }
    .commodity-price {
        margin-top: 15rpx;
    }
    .commodity-price-new {
        color: #FF1E1E;
        font-size: 36rpx;
        font-weight: bold;
    }
    .commodity-price-old{
        color: #999999;
        font-size: 22rpx;
        font-weight: 500;
        text-decoration: line-through;
        margin-left: 28rpx;
    }
    .commodity-post {
        color: #999999;
        font-size: 24rpx;
        font-weight: 500;
        margin-top: 10rpx;
    }
    .commodity-info-share {
        /* margin-top: 30rpx; */
        text-align: right;
        font-size: 22rpx;
        color: #999999;
    }
    .commodity-info-num {
        color: #999999;
        font-size: 24rpx;
        font-weight: 500;
        padding-top: 30rpx;
    }
    .comment {
        background: #ffffff;
        margin-top: 22rpx;
        padding-top: 35rpx;
    }
    .comment-header {
        display: flex;
        justify-content: space-between;
        margin-left: 40rpx;
    }
    .header-title {
        color: #333333;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;

    }
    .header-title::before {
        display: inline-block;
        content: '';
        width: 6rpx;
        height: 24rpx;
        background:#24C79C;
        border-radius: 3rpx;
        margin-right: 10rpx;
    }
    .header-more {
        color: #666666;
        font-size: 24rpx;
        font-weight: 500;
        margin-right: 39rpx;
        line-height: 50rpx;
    }
    .comment-item {
        padding: 43rpx 0 30rpx 42rpx;
        border-bottom: 1rpx solid #F5F5F5;
        display: flex;
        justify-content: left;
    }
    .comment-info {
        width: 473rpx;
        margin-left: 30rpx;
    }
    .head-portrait {
        width: 57rpx;
        height: 57rpx;
    }
    .comment-person {
        margin-top: 20rpx;
    }
    .comment-text {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
        margin-top: 40rpx;
    }
    .comment-photo-box {
        display: flex;
        justify-content: left;
    }
    .comment-photo {
        width: 124rpx;
        height: 124rpx;
        margin-top: 27rpx;
        margin-right: 20rpx;
        border-radius:10rpx;
    }
    .store {
        position: relative;
        margin-top: 22rpx;
        padding: 23rpx 52rpx 30rpx 43rpx;
        background: #ffffff;
        display: flex;
        justify-content: left;
    }
    .store-portrait {
        width: 60rpx;
        height: 60rpx;
    }
    .store-info {
        margin-left: 24rpx;
    }
    .store-name {
        color:#333333;
        font-size:36rpx;
        margin-top: 12rpx;
    }
    .store-text {
        width: 369rpx;
        color: #999999;
        font-size: 28rpx;
        font-weight: 500;
        margin-top: 21rpx;
    }
    .store-commodity {
        color: #999999;
        font-size: 26rpx;
        font-weight: 500;
        margin-top: 63rpx;
    }
    .call-merchant {
        position: absolute;
        bottom: 30rpx;
        right: 52rpx;
        width: 187rpx;
        height: 53rpx;
        border:1rpx solid rgba(230,230,230,1);
        border-radius:10rpx;
        color: #24C79C;
        font-size: 30rpx;
        line-height: 53rpx;
        padding-left: 15rpx;
    }
    .detail {
        margin-top: 22rpx;
        background: #ffffff;
        padding: 35rpx 38rpx 40rpx 38rpx;
    }
    .detail-title {
        color: #333333;
        font-size: 36rpx;
        font-weight: 500;
    }
    .detail-title::before {
        display: inline-block;
        content: '';
        width: 6rpx;
        height: 24rpx;
        background:#24C79C;
        border-radius: 3rpx;
        margin-right: 10rpx;
    }
    .detail-img {
        width: 673rpx;
        height: 410rpx;
        border-radius: 10rpx;
        margin-top: 25rpx;
        border: 1rpx solid #ccc;
    }
    .detail-text {
        color: #333333;
        font-size: 26rpx;
        font-weight: 500;
        text-indent: 35rpx;
        line-height: 40rpx;
        margin-top: 30rpx;
    }
    .recommend {
        margin-top: 22rpx;
        background: #ffffff;
        padding: 38rpx;
        margin-bottom: 200rpx;
    }
    .recommend-title {
        color: #333333;
        font-size: 36rpx;
        font-weight: 500;
    }
    .recommend-title::before {
        display: inline-block;
        content: '';
        width: 6rpx;
        height: 24rpx;
        background:#24C79C;
        border-radius: 3rpx;
        margin-right: 10rpx;
    }
    .recommend-list {
        display: flex;
        justify-content: space-between;
        margin-top: 23rpx;
    }
    .recommend-item {
        width: 215rpx;
        height: 310rpx;
        background:rgba(255,255,255,1);
        border: 1rpx solid rgba(230,230,230,1);
        border-radius: 5rpx;
    }
    .recommend-item-img {
        width: 215rpx;
        height: 229rpx;
    }
    .recommend-item-info {
        display: flex;
        justify-content: space-between;
        margin-top: 28rpx;
        padding: 0 24rpx 0 11rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bottom {
        position: fixed;
        bottom: 0rpx;
        width: 90%;
        height: 140rpx;
        padding: 0 38rpx;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .buying-box {
        width: 410rpx;
        height: 84rpx;
        display: flex;
        justify-content: space-between;
    }
    .buying-addCart {
        width: 50%;
        height: 100%;
        background: #FFFFFF;
        color: #24C79C;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        line-height: 84rpx;
        border-top-left-radius: 42rpx;
        border-bottom-left-radius: 42rpx;
        box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(56,56,56,0.08);
    }
    .buying-now {
        width: 50%;
        height: 100%;
        background:rgba(36,199,156,1);
        color: #FFFFFF;
        font-size: 30rpx;
        font-weight: bold;
        line-height: 84rpx;
        text-align: center;
        border-top-right-radius: 42rpx;
        border-bottom-right-radius: 42rpx;
        box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(56,56,56,0.08);
    }
    .go-store,
    .add-cart {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        color: #999999;
        font-size: 24rpx;
        height: 80rpx;
    }
    .buying-dialog {
        z-index: 999;
    }
    .mark {
        position: fixed;
        top: 0rpx;
        bottom: 0rpx;
        left: 0rpx;
        right: 0rpx;
        background:rgba(0,0,0,1);
        opacity:0.3;
    }
    .content {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        height: 543rpx;
        background: #ffffff;
        opacity: 1
    }
    .buying-top {
        /* width: 100%; */
        height: 261rpx;
        padding: 10rpx 44rpx 43rpx 38rpx;
    }
    .buying-info {
        display: flex;
        justify-content: left;
    }
    .buying-info-img {
        width: 175rpx;
        height: 167rpx;
    }
    .buying-info-price {
        color: #FF1E1E;
        font-size: 36rpx;
        font-weight: 500;
        margin-top: 48rpx;
    }
    .buying-info-name {
        color: #333333;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
    }
    .buying-num,
    .buying-standards {
        display: flex;
        justify-content: space-between;
        margin-top: 50rpx;
    }
    .choose-standards {
        width: 192rpx;
        height: 52rpx;
        font-size: 28rpx;
        color: #999999;
        text-align: center;
        line-height: 52rpx;
        background: #F4F4F4;
        border-radius: 26rpx;
    }
    .choose-standards-show {
        width: 192rpx;
        height: 52rpx;
        font-size: 28rpx;
        color: #999999;
        text-align: center;
        line-height: 52rpx;
        background: #F4F4F4;
        border-radius: 26rpx;
        border-bottom-left-radius: 0rpx;
        border-bottom-right-radius: 0rpx;
    }
    .standards-box {
        position: fixed;
        bottom: 156rpx;
        right: 44rpx;
        width: 192rpx;
        height: 104rpx;
        z-index: 100;
    }
    .standards-box-item {
        width: 192rpx;
        height: 52rpx;
        color: #999999;
        text-align: center;
        line-height: 52rpx;
        font-size: 28rpx;
        background: #F4F4F4;
    }
    .standards-box-item-active {
        background: #24C79C;
        color: #ffffff;
    }
    .choose-num {
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
    }
    .choose-num-reduce,
    .choose-num-add {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background:#F4F4F4;
        text-align: center;
        line-height: 38rpx;
        color: #C8C8C8;
        font-size: 40rpx;
    }
    .choose-num-total {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        padding: 0 30rpx;
    }
    .buying-bottom {
        position: absolute;
        bottom: 0rpx;
        left: 0rpx;
        width: 100%;
        height: 140rpx;
        box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.1);
    }
    .buying-bottom-button {
        width: 473rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx;
        margin: 28rpx auto;
        font-size: 30rpx;
        font-weight: bold;
        color:rgba(255,255,255,1);
        text-align: center;
        line-height: 84rpx;
    }
    
</style>